<template>
	<view class="com-read-more y-flex position-relative" :style="{'height': moreShow ? showFull ? '' : maxHeight + 'px' : ''}">
		<view ref="content" class="com-read-more-content">
			<slot></slot>
		</view>
		<com-gap height="50" v-if="showFull"></com-gap>
		<view class="position-absolute bottom-0 left-0 right-0 y-flex" style="height: 90rpx;" v-if="moreShow">
			<view class="y-flex-1 position-relative top-5" v-if="!showFull" :style="{'background-image': `linear-gradient(to top, ${hexToRgba(shadowColor, 0.5)}, ${hexToRgba(shadowColor, 0.1)})`}"></view>
			<view class="y-flex-1 position-relative top-5" v-if="!showFull" :style="{'background-image': `linear-gradient(to top, ${shadowColor}, ${hexToRgba(shadowColor, 0.8)})`}"></view>
			<view class="position-absolute bottom-10 left-0 right-0 y-flex y-row y-align-center y-justify-center"
			@tap="toggle">
				<text :style="{'font-size': pixelunit(tipSize), 'color': tipColor}">{{ showFull ? closeText : openText}}</text>
				<com-icon :name="showFull ? 'fold' : 'unfold'" :size="tipSize" :color="tipColor"></com-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import { pixelunit, hexToRgba, rgbaToHex } from '@/assets/js/util.js'
	export default {
		props: {
			//当获取不到高度时是否默认显示
			visible: {
				type: Boolean,
				default: false
			},
			//最大高度
			maxHeight: {
				type: [String, String],
				default: 200
			},
			openText: {
				type: String,
				default: '展开阅读全文'
			},
			closeText: {
				type: String,
				default: '收起'
			},
			tipSize: {
				type: [String, String],
				default: 26
			},
			tipColor: {
				type: String,
				default: '#2979ff'
			},
			shadowColor: {
				type: String,
				default: '#fff'
			}
		},
		computed: {
			pixelunit() {
				return pixelunit
			}
		},
		data () {
			return {
				showFull: false,
				moreShow: false
			}
		},
		mounted() {
			this.$nextTick(this.getMoreShow)
		},
		methods: {
			hexToRgba (hex, opacity) {
				let opac = 0
				if ( hex.indexOf('rgba') > -1 ) {
					const arr = hex.split(',')
					opac = Number(arr[arr.length-1].replace(')', ''))
					hex = rgbaToHex(hex)
				}
				if ( hex.indexOf('rgb') > -1 ) hex = rgbToHex(hex)
				return hexToRgba(hex, opacity * opac)
			},
			getMoreShow () {
				this.getRect().then(res => {
					if ( res.height == 0 && this.visible ) this.moreShow = true
					else this.moreShow = res.height > this.maxHeight
				})
			},
			toggle () {
				this.showFull = !this.showFull
				this.getMoreShow()
			},
			getRect () {
				return new Promise(resolve => {
					// #ifdef APP-NVUE
					uni.requireNativePlugin('dom').getComponentRect(this.$refs.content, res => {
						resolve(res.size)
					})
					// #endif
					// #ifndef APP-NVUE
					uni.createSelectorQuery().in(this).select('.com-read-more-content').boundingClientRect(data => {
						resolve(data)
					}).exec();
					// #endif
				})
			}
		}
	}
</script>

<style>
</style>